import React, { Component } from 'react'
const MONITOR_INTERVAL = 10;
const MONITOR_HEIGHT = 15;
let disTimer;
export default class Monitor extends Component {
    state = {
        opacity: 1
    }
    componentDidUpdate(prevProps, prevState) {
        if (prevProps.page !== this.props.page) {
            this.mouseMove();
        }
    }
    mouseMove = () => {
        window.clearTimeout(disTimer);
        this.setState({
            opacity: 1
        })
        disTimer = window.setTimeout(() => {
            this.setState({
                opacity: 0.2
            })
        }, 2000)
    }
    render() {
        const RenderList = [];
        for (let index = 0; index <= this.props.pageNumber; index++) {
            RenderList.push(
                <RoundMonitor
                    goPage={() => { this.props.goPage(index,1000) }}
                    key={index}
                    baseTop={index * (MONITOR_INTERVAL + MONITOR_HEIGHT)}
                    currentTop={(this.props.scroll / this.props.height - index) * (MONITOR_INTERVAL + MONITOR_HEIGHT)}
                    isHome={this.props.page === 0||this.props.page===this.props.pageNumber}
                />)
        }
        return (
            <div className='monitor' style={this.state} onMouseMove={this.mouseMove}>
                {RenderList}
            </div>
        )
    }
}


const roundBeyond = {
    position: 'absolute',
    width: MONITOR_HEIGHT,
    height: MONITOR_HEIGHT,
    borderRadius: '50%',
    background: 'rgba(255,255,255,0.2)',
    transition:'all 0.25s ease',
    overflow: 'hidden',
}
const roundUnder = {
    position: 'absolute',
    width: MONITOR_HEIGHT,
    height: MONITOR_HEIGHT,
    borderRadius: '50%',
    background: '#fff',
    transition: 'all 0.25s ease'
}

const RoundMonitor = (props) => {
    return (
        <div style={Object.assign({ ...roundBeyond }, {
            top: props.baseTop,
            background:props.isHome?'rgba(255,255,255,0.2)':'rgba(0,0,0,0.2)'
        })} onClick={props.goPage}>
            <div style={Object.assign({ ...roundUnder }, {
                top: props.currentTop,
                background:props.isHome?'#fff':'#000'
            })}></div>
        </div>
    )
}